<template>
  <div class="app-container">
    <div v-show="!licenseInfo.visible">
      <!-- 条件栏 -->
      <new-page-filter
        v-model:query="filterInfo.query"
        :filter-list="filterInfo.list"
        :listTypeInfo="listTypeInfo"
        :filter-btn="filterInfo.searchBtn"
      />
      <modelTips
        :items="modelTipsInfo.items"
        :title="modelTipsInfo.title"
        :brackets="true"
      />
      <!-- 表格 -->
      <table-container
        :refresh="tableInfo.refresh"
        :init-curpage="tableInfo.initCurpage"
        v-model:data="tableInfo.data"
        :api="tableInfo.api"
        :tab-index="true"
        :check-box="false"
        :query="filterInfo.query"
        :field-list="tableInfo.fieldList"
        :handle="tableInfo.handle"
        @handleEvent="handleEvent"
        :row-class-name="tableRowClassName"
      >
        <template v-slot:col-licenseNumber="scope">
          <p
            class="slip-edit"
            v-if="$permission('licenseExpiryWarningLicense:details')"
            @click="showLicenseDetail(scope.row.id)"
          >
            {{ scope.row.licenseNumber || '-' }}
          </p>
          <p v-else>{{ scope.row.licenseNumber }}</p>
        </template>
        <template v-slot:col-commonName="scope">
          <p>{{ scope.row.commonName }}</p>
          <p>{{ scope.row.productCode }}</p>
          <p>{{ scope.row.alias }}</p>
        </template>
        <template v-slot:col-type="scope">
          <p>{{ scope.row.productTypeValue }}</p>
          <p>{{ scope.row.codeTypeValue }}</p>
          <p>{{ scope.row.productCategoryValue }}</p>
        </template>
        <template v-slot:col-standard="scope">
          <p>{{ scope.row.standard }}</p>
          <p>{{ scope.row.unitName }}</p>
        </template>
      </table-container>
    </div>
    <license-details
      v-if="licenseInfo.visible"
      v-model:visible="licenseInfo.visible"
      :id="licenseInfo.id"
      @returnBack="getList"
    ></license-details>
  </div>
</template>

<script setup name="licenseExpiryWarning">
import {
  licenseExpirePage,
  exportLicenseExpire,
  printLicenseExpire,
} from '@/api/warning'
import LicenseDetails from './../../product/license/details'
import modelTips from '@/components/ModelTips/index'
import { getDeptAll, getSupplierAll } from '@/api/core'

const { proxy } = getCurrentInstance()
const route = useRoute()
//颜色标识
const modelTipsInfo = ref({
  title: '效期状态',
  items: [
    {
      label: '近效期',
      style: { width: '10px', height: '10px', background: '#fceacb' },
    },
    {
      label: '过期',
      style: { width: '10px', height: '10px', background: '#f5e4e4' },
    },
  ],
})
const listTypeInfo = ref({
  validateStatusList: [],
  depotList: [],
})
// 过滤相关配置
const filterInfo = ref({
  query: {
    searchType: 'license',
    deptAuth: 'deptId',
    // sort: 'case when license_end_date is null then 1 else 0 end asc,license_end_date asc',
    typeMult: 'nearly,expire',
  },
  list: [
    {
      label: '证照类型',
      value: 'licenseType',
      asValue: 'licenseType',
      componentType: 'select-model',
      code: 'license_type',
      event: search,
    },
    {
      label: '效期状态',
      value: 'typeMult',
      asValue: 'typeMult',
      componentType: 'select-model',
      code: 'license_expire_warning_type',
      event: search,
      multiple: true,
    },
    {
      componentType: 'slip-select',
      label: '部门',
      value: 'deptIds',
      query: {
        deptAuth: 'id',
        status: 1,
      },
      api: getDeptAll,
      multiple: true,
      event: search,
    },
    {
      componentType: 'slip-select',
      label: '供应商',
      value: 'supplierIds',
      api: getSupplierAll,
      query: { supplierAuth: 'supplierId', sort: 'create_time desc' },
      keyField: 'supplierName',
      valueField: 'supplierId',
      multiple: true,
      event: search,
    },
    {
      label: '名称/证号',
      value: 'keyword',
      componentType: 'input',
      event: search,
    },
    {
      label: '证照状态',
      value: 'status',
      asValue: 'status',
      componentType: 'select-model',
      code: 'new_enabled_type',
      event: search,
    },
  ],
  searchBtn: [
    { type: 'button', label: '搜索', event: search },
    { type: 'button', label: '打印', event: print, show: true },
    {
      type: 'button',
      label: '导出excel',
      event: exportExcel,
      show: true,
    },
  ],
})
// 表格相关
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  api: licenseExpirePage,
  data: [],
  selections: [],
  fieldList: [
    { label: '证号', value: 'licenseNumber', type: 'slot' },
    { label: '证照类型', value: 'licenseTypeValue' },
    { label: '产品名称', value: 'licenseName' },
    { label: '生效日期', value: 'licenseBeginDate' },
    { label: '失效日期', value: 'licenseEndDate' },
    { label: '厂家名称', value: 'brandName' },
    { label: '供应商名称', value: 'supplierNames' },
    { label: '证照状态', value: 'statusValue' },
    { label: '效期状态', value: 'validityStatus' },
    { label: '备注', value: 'remark' },
  ],
})
const licenseInfo = ref({
  id: '',
  visible: false,
})

watch(
  () => route.params,
  (value) => {
    const params = value
    const _paramsData = params.paramsData && JSON.parse(params.paramsData)
    if (
      params &&
      params.dataIndex !== undefined &&
      params.dataIndex !== null &&
      route.name === 'licenseExpiryWarning'
    ) {
      if (_paramsData) {
        filterInfo.value.query['typeMult'] = _paramsData.statusCode
        console.log(_paramsData)
        filterInfo.value.query['status'] = _paramsData.status
      }
      getList()
    }
  },
  {
    immediate: true,
    deep: true,
  }
)

getList()
// onMounted(() => {
// })

// 获取列表
function getList() {
  tableInfo.value.refresh = Math.random()
}
// 搜索
function search() {
  // 重置分页
  tableInfo.value.initCurpage = Math.random()
  tableInfo.value.refresh = Math.random()
}
function exportExcel() {
  const _data = getNotNullData(filterInfo.value.query)
  exportLicenseExpire(_data).then((resp) => {
    if (resp) {
      proxy.$fn.parseExcel(resp)
    }
  })
}
function print() {
  const _data = getNotNullData(filterInfo.value.query)
  printLicenseExpire(_data).then((resp) => {
    if (resp && resp.success) {
      proxy.$print.printOrder(resp.data)
    }
  })
}
function getNotNullData(data) {
  const _data = {}
  for (const key in data) {
    if (data[key] || data[key] === 0) {
      _data[key] = data[key]
    }
  }
  return _data
}
// 触发事件
function handleEvent(event, data) {
  switch (event) {
    case 'tableCheck':
      tableInfo.value.selections = [...data]
      break
  }
}
function showLicenseDetail(id) {
  licenseInfo.value.visible = true
  licenseInfo.value.id = id
}
function tableRowClassName({ row = undefined }) {
  if (row.validityStatus === '近效期') {
    return 'nearly-row'
  } else if (row.validityStatus === '过期') {
    return 'expire-row'
  }
  return ''
}
</script>

<style scoped lang="scss">
:deep(.el-table) {
  .nearly-row {
    background: #fceacb;
  }
  .expire-row {
    background: #f5e4e4;
  }
}
</style>
